<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<link href="${ctx}/resources/css/print.css" type="text/css" rel="stylesheet" />
<script src="${ctx}/resources/js/jquery.PrintArea.js" type="text/javascript"></script>
<script>
	$(function() {
		$("#printBtn").click(function() {
			$("#qrDiv").printArea();
		});
		$("#chooseBox").change(function() {
			$("#pleaseSelect").remove();
			$("#qrDiv .qr:not(.box)").remove();
			var boxId = $(this).val();
			if (boxId) {
				$.post("${ctx}/adoms/qrGoodsCode/printByBox", {
					boxId : boxId
				}, function(data) {
					var box = data.box;
					$("#boxImg").attr("src", box.uri);
					var boxNum = "b." + box.id + "." + box.qrCode + "." + box.createScale;
					$("#boxNum").html(boxNum);
					var goodsList = data.goodsList;
					$.each(goodsList, function(i, goods) {
						var goodsDiv = $("#qrClone .qr").clone();
						$(".goods", goodsDiv).attr("src", goods.goodsUri);
						$(".integral", goodsDiv).attr("src", goods.integralUri);
						$("[goods]", goodsDiv).html("g." + goods.innerNum);
						$("[integral]", goodsDiv).html("i." + goods.innerNum);
						$("#qrDiv").append(goodsDiv);
					});
				}, "json");
			}
		});
	});
</script>
<div class="well">
	<div class="container form-horizontal">
		按箱打印，请选择箱码：
		<select id="chooseBox">
			<option id="pleaseSelect">请选择...</option>
			<c:forEach items="${boxList }" var="box">
				<option value="${box.id }">b.${box.id }.${box.qrCode }.${box.createScale } - ${box.qrName } - ${box.createScale }条</option>
			</c:forEach>
		</select>
		<button id="printBtn" class="btn">打印二维码</button>
	</div>
	<div class="container"></div>
</div>
<div class="container form-horizontal">
	<div id="qrDiv">
		<div class="qr box">
			<img id="boxImg" src="" class="goods">
			<span id="boxNum"></span>
			<div class="qrText">
				b.箱码
				<br />
				g.商品二维码
				<br />
				i.商品积分码
				<br />
			</div>
		</div>
	</div>
</div>
<div id="qrClone" class="hide">
	<div class="qr">
		<img src="" class="goods">
		<span goods></span>
		<img src="" class="integral">
		<span integral></span>
	</div>
</div>